<template>
  <a-card
    title="Windows 硬件信息"
    :loading="loading"
    style="height: 100%; display: flex; flex-direction: column"
  >
    <a-tabs :tabBarGutter="20" style="height: 100%">
      <a-tab-pane key="system" tab="系统信息">
        <div class="info-card">
          <ul v-if="Object.keys(systemInfo).length > 0">
            <li><strong>操作系统:</strong> {{ systemInfo.distro }}</li>
            <li><strong>架构:</strong> {{ systemInfo.arch }}</li>
            <li><strong>主机名:</strong> {{ systemInfo.hostname }}</li>
            <li><strong>内核版本:</strong> {{ systemInfo.kernel }}</li>
          </ul>
          <div v-else>加载中...</div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="cpu" tab="CPU 信息">
        <div class="info-card">
          <ul v-if="Object.keys(cpuInfo).length > 0">
            <li><strong>制造商:</strong> {{ cpuInfo.manufacturer }}</li>
            <li><strong>品牌:</strong> {{ cpuInfo.brand }}</li>
            <li><strong>大核心:</strong> {{ cpuInfo.physicalCores }}</li>
            <li><strong>效率核心:</strong> {{ cpuInfo.efficiencyCores }}</li>
            <li><strong>当前速度:</strong> {{ cpuInfo.speed }} GHz</li>
            <li><strong>最低频率:</strong> {{ cpuInfo.speedMin }} GHz</li>
            <li><strong>最大频率:</strong> {{ cpuInfo.speedMax }} GHz</li>
            <li><strong>二级缓存:</strong> {{ formatMemory(cpuInfo.cache?.l2) }}</li>
            <li><strong>三级缓存:</strong> {{ formatMemory(cpuInfo.cache?.l3) }}</li>
          </ul>
          <div v-else>加载中...</div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="memory" tab="内存信息">
        <div class="info-card">
          <ul v-if="Object.keys(memoryInfo).length > 0">
            <li><strong>总内存:</strong> {{ formatMemory(memoryInfo.total) }}</li>
            <li><strong>已用内存:</strong> {{ formatMemory(memoryInfo.used) }}</li>
            <li><strong>空闲内存:</strong> {{ formatMemory(memoryInfo.free) }}</li>
            <li><strong>使用率:</strong> {{ calculateMemoryUsage() }}%</li>
          </ul>
          <div v-else>加载中...</div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="disk" tab="磁盘信息">
        <div class="info-card">
          <div v-if="diskInfo.length > 0" v-for="(disk, index) in diskInfo" :key="index">
            <ul>
              <li><strong>磁盘名称:</strong> {{ disk.name }}</li>
              <li><strong>磁盘类型:</strong> {{ disk.type }}</li>
              <li><strong>总容量:</strong> {{ formatMemory(disk.size) }}</li>
              <li><strong>磁盘版本:</strong> {{ disk.firmwareRevision }}</li>
              <li><strong>磁盘接口:</strong> {{ disk.interfaceType }}</li>
            </ul>
            <a-divider v-if="index < diskInfo.length - 1" />
          </div>
          <div v-else>加载中...</div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="gpu" tab="显示信息">
        <div class="info-card">
          <div v-if="gpuInfo.length > 0" v-for="(gpu, index) in gpuInfo" :key="index">
            <ul>
              <li><strong>制造商:</strong> {{ gpu.vendor }}</li>
              <li><strong>型号:</strong> {{ gpu.model }}</li>
              <li><strong>总内存:</strong> {{ gpu.memoryTotal / 1024 }}G</li>
              <li><strong>已用内存:</strong> {{ gpu.memoryUsed }}MB</li>
            </ul>
            <a-divider />
          </div>
          <div v-if="displayInfo.length > 0" v-for="(display, index) in displayInfo" :key="index">
            <ul>
              <li><strong>分辨率:</strong> {{ display.resolutionX }}x{{ display.resolutionY }}</li>
              <li><strong>刷新率:</strong> {{ display.currentRefreshRate }} Hz</li>
              <li><strong>主显示器:</strong> {{ display.main ? '是' : '否' }}</li>
            </ul>
            <a-divider v-if="index < displayInfo.length - 1" />
          </div>
          <div v-if="gpuInfo.length === 0 && displayInfo.length === 0">加载中...</div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="baseboard" tab="主板信息">
        <div class="info-card">
          <ul v-if="Object.keys(baseboard).length > 0">
            <li><strong>制造商:</strong> {{ baseboard.manufacturer }}</li>
            <li><strong>型号:</strong> {{ baseboard.model }}</li>
            <li><strong>序列号:</strong> {{ baseboard.serial }}</li>
            <li><strong>版本:</strong> {{ baseboard.version }}</li>
          </ul>
          <div v-else>加载中...</div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      cpuInfo: {},
      systemInfo: {},
      memoryInfo: {},
      diskInfo: [],
      gpuInfo: [],
      displayInfo: [],
      baseboard: {}
    }
  },
  mounted() {
    this.fetchHardwareInfo()
  },
  methods: {
    async fetchHardwareInfo() {
      try {
        this.loading = true
        const api = window.api

        this.systemInfo = (await api.getHardwareInfoType('systemInfo')) || {}
        this.loading = false
      } catch (error) {
        console.error('获取硬件信息失败:', error)
        this.loading = false
      }

      try {
        this.cpuInfo = (await api.getHardwareInfoType('cpuInfo')) || {}
        this.memoryInfo = (await api.getHardwareInfoType('memoryInfo')) || {}
        this.diskInfo = (await api.getHardwareInfoType('diskInfo')) || []
        const gpuInfo = await api.getHardwareInfoType('gpuInfo')
        this.gpuInfo = gpuInfo?.controllers || []
        this.displayInfo = gpuInfo?.displays || []
        this.baseboard = (await api.getHardwareInfoType('baseboard')) || {}
      } catch (error) {
        console.error('获取硬件信息失败:', error)
      }
    },
    formatMemory(bytes) {
      if (bytes === undefined || bytes === null) {
        return 'N/A'
      }
      const units = ['B', 'KB', 'MB', 'GB', 'TB']
      let l = 0
      while (bytes >= 1024 && l < units.length - 1) {
        bytes /= 1024
        l++
      }
      return `${bytes.toFixed(2)} ${units[l]}`
    },
    calculateMemoryUsage() {
      if (this.memoryInfo.total === undefined || this.memoryInfo.used === undefined) {
        return 'N/A'
      }
      return Math.round((this.memoryInfo.used / this.memoryInfo.total) * 100)
    }
  }
}
</script>

<style scoped>
.info-card {
  height: 100%;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.info-card h2 {
  margin-top: 0;
  color: #4a90e2;
}

.info-card ul {
  list-style-type: none;
  padding: 0;
}

.info-card li {
  margin-bottom: 8px;
}

.info-card strong {
  font-weight: bold;
  color: #333;
}

.ant-card :deep(.ant-card-body) {
  flex: 1 !important;
}

.ant-tabs :deep(.ant-tabs-content) {
  height: 100%;
}
</style>
